<template>
  <div class="app-container flex-col">
    <div class="title">
      <screenfull :isShow="false" id="screenfull" class="right-menu-item hover-effect"  />
      <span class="time">{{ time }}</span>
    </div>
    <!-- 主体部分 -->
    <div class="main flex-col">
      <!-- 数量展示 -->
      <div class="totalCounts flex-row">
        <div class="flex-col userNum">
          <div class="flex-row text1">
            <span class="title_1">当前用户总量</span>
          </div>
          <div class="flex-row  num1">
            <div v-for="(char, index) in appUserNum" 
              :key="index" :class=" char == '.' ? 'point': 'num_1' ">{{ char }}</div>
            <span class="danwei">个</span>
          </div>
        </div>
        <div class="flex-col refuelingAmount">
          <div class="flex-row text1">
            <span class="title_1">当前用户加油总金额</span>
          </div>
          <div class="flex-row num1">
            <div v-for="(char, index) in consumptionAmount" 
              :key="index" :class=" char == '.' ? 'point': 'num_1'">{{ char }}</div>
            <span class="danwei">元</span>
          </div>
        </div>
        <div class="flex-col rechargeAmount">
            <div class="flex-row text2 ">
            <span class="title_1">当前用户充值总金额</span>
          </div>
          <div class="flex-row num1">
            <div v-for="(char, index) in rechargeAmount" 
              :key="index" :class=" char == '.' ? 'point': 'num_1'">{{ char }}</div>
            <span class="danwei">元</span>
          </div>
        </div>
        <!-- <div class="flex-col consumptionAmount">
            <div class="flex-row text2 ">
            <span class="title_1">当前用户便利店消费总金额</span>
          </div>
          <div class="flex-row num1">
            <div class="num_1">1</div>
            <span class="point">.</span>
            <div class="num_1">7</div>
            <span class="danwei">元</span>
          </div>
        </div> -->
      </div>
      <!-- 图表展示 -->
      <div class="allCharts flex-row justify-between">
        <div class="left flex-col justify-between">
          <div class="fifteenChart ">
            <fifteen-chart :chartData="fifteenChart.data"></fifteen-chart>
          </div>
          <div class="sevenChart ">
            <seven-chart :chartData="sevenChart.data"></seven-chart>
          </div>
        </div>
        <div class="right flex-row">
          <div class="commchart rankingChart ">
            <rank-chart :chartData="rankChart.data"></rank-chart>
          </div>
          <div class="commchart statisticsChart ">
            <order-chart :chartData="orderChart.data"></order-chart>
          </div>
          <div class="commchart otherChart flex-col">
            <div class="commbox flex-row">
              <div class="otherleft flex-row"> 
                <img class="commImg" referrerpolicy="no-referrer" src="~@/assets/image/icon6.png"/>
                <div class="text-group_1 flex-col justify-between">
                      <span class="num_2">{{ other.countNum }}</span>
                      <span class="text_2">付款订单数</span>
                </div>
              </div>
              <div class="otherright flex-row">
                <img class="commImg" referrerpolicy="no-referrer" src="~@/assets/image/icon7.png" />
                <div class="text-group_2 flex-col justify-between">
                  <span class="num_2">{{ other.todayAppUserInfoNum }}</span>
                  <span class="text_2">今日新增会员数</span>
                </div>
              </div>
            </div>
            <div class="commbox flex-row">
              <div class="otherleft flex-row"> 
                <img class="commImg" referrerpolicy="no-referrer" src="~@/assets/image/icon8.png"/>
                <div class="text-group_1 flex-col justify-between">
                  <span class="num_2">{{ other.member }}</span>
                  <span class="text_2">会员数</span>
                </div>
              </div>
              <div class="otherright flex-row">
                <img class="commImg" referrerpolicy="no-referrer" src="~@/assets/image/icon6.png" />
                <div class="text-group_2 flex-col justify-between">
                  <span class="num_2">{{ other.rechargeUserNum }}</span>
                  <span class="text_2">充值用户数</span>
                </div>
              </div>
            </div>
            <!-- <div class="commbox flex-row">
              <div class="otherleft flex-row "> 
                <img class="commImg" referrerpolicy="no-referrer" src="~@/assets/image/icon6.png"/>
                <div class="text-group_1 flex-col justify-between">
                      <span class="num_2">5096</span>
                      <span class="text_2">付款订单数</span>
                </div>
              </div>
              <div class="otherright  flex-row ">
                <img class="commImg" referrerpolicy="no-referrer" src="~@/assets/image/icon6.png" />
                <div class="text-group_2 flex-col justify-between">
                  <span class="num_2">2671669.24</span>
                  <span class="text_2">当前可提现金额</span>
                </div>
              </div>
            </div> -->
          </div>
          <div class="commchart refuelingChart ">
            <table class="table">
              <thead>
                <tr>
                  <th>手机号码</th>
                  <th>油号</th>
                  <th>金额</th>
                  <th>升数</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in tableData" :key="index">
                  <td>{{ item.customerPhone }}</td>
                  <td>{{ `${item.oilGun}-${item.oilName}` }}</td>
                  <td>￥{{ item.amt }}</td>
                  <td>{{ item.orderLiters }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>
<script>
import { getInfo, getTableInfo } from '@/api/screen/info'
import FifteenChart from './chart/FifteenChart.vue'
import OrderChart from './chart/OrderChart.vue'
import RankChart from './chart/RankChart.vue'
import SevenChart from './chart/SevenChart.vue'
import Screenfull from "@/components/Screenfull";
export default {
  components: { FifteenChart, SevenChart, RankChart, OrderChart, Screenfull },
  name: 'SmartScreen',
  data() {
    return {
      // timer: null,
      time:'', //时间
      timeId: null, // 定时器
      appUserNum: '', //用户总量
      consumptionAmount: '', // 加油总金额(8位)
      rechargeAmount: '', // 充值金额(8位)
      //其他统计
      other: {
        countNum: 0, // 订单数
        member: 0, // 会员数
        todayAppUserInfoNum: 0, // 新增会员数
        rechargeUserNum: 0 //充值用户
      },
      // 加油订单表单
      tableData: [],
      // 订单走势 状图
      fifteenChart: {
        data: {
          xAxis: [],
          yAxis: [ ]
        },
        },
        // 交易走势 折线图
      sevenChart: {
        data: {
          legend: ['成交量', '成交额'],
          xAxis: [],
          yAxis: {
           turnover: [], //成交量
           volume: [] // 成交额
          }
        }
      },
      // 用户加油排行榜
      rankChart: {
        data: {
          xAxis: [],
          yAxis: []
        }
      },
      // 订单统计
      orderChart: { 
        data: [  ]
       }
    }
  },
  computed: {
  },
  created() {
    this.getInfoData()
    this.getTableInfoData()
    // this.timer = setInterval(() => {
    //    this.getInfoData()
    //    this.getTableInfoData() // 每隔1小时加载一次数据
    // }, 7200000); 
  },

  mounted() {
    this.timeId = setInterval(this.updateClock, 1000)
  },
    beforeDestroy() {
    clearInterval(this.timeId)
    // clearInterval(this.timer); // 在页面销毁之前清除定时器
  },
  methods: {
    // 获取会员数据
    getInfoData() {
       let presentEnterprise = this.$store.state.user.presentEnterprise
      if(!presentEnterprise) {
         presentEnterprise = {enterpriseId :null}
      }
      getInfo(presentEnterprise.enterpriseId).then(res => {
          this.appUserNum = ("" + res.data.appUserNum) || '0'
          this.consumptionAmount = res.data.consumptionAmount.toFixed(2).padStart(9, "0") 
          this.rechargeAmount = res.data.rechargeAmount.toFixed(2).padStart(9, "0") 
          // 其他统计
          this.other.countNum = res.data.countNum
          this.other.todayAppUserInfoNum = res.data.todayAppUserInfoNum
          this.other.rechargeUserNum = res.data.rechargeUserNum
          this.other.member = res.data.appUserNum
          // 用户加油排行榜
          // this.rankChart.data.xAxis = []
          // this.rankChart.data.yAxis = [] // 先清空数据
          const oilAmtRankList = res.data.oilAmtRankList
          oilAmtRankList.forEach(item => {
            this.rankChart.data.xAxis.unshift(item.amt)
            this.rankChart.data.yAxis.unshift(item.customerPhone)         
          }) 
          // 订单统计
          // this.orderChart.data = []
          const channelsList = res.data.channelsList
          channelsList.forEach(item => {
            let newDataItem = {
                value: item.paycount,
                name: item.name,
            };
            this.orderChart.data.push(newDataItem);
          }) 
          
          // 订单走势
          // this.fifteenChart.data.xAxis = []
          // this.fifteenChart.data.yAxis = []
          const rechargeColumnList = res.data.rechargeColumnList
          rechargeColumnList.forEach(item => {
            this.fifteenChart.data.xAxis.push(item.xdate)
            this.fifteenChart.data.yAxis.push(item.value)
          })
          // 七日交易走势
          // this.sevenChart.data.yAxis.turnover = []
          // this.sevenChart.data.yAxis.volume = []
          // this.sevenChart.data.xAxis = []
          const consumptionFoldLineList = res.data.consumptionFoldLineList
          consumptionFoldLineList.forEach(item => {
            this.sevenChart.data.yAxis.turnover.push(item.turnover);
            this.sevenChart.data.yAxis.volume.push(item.volume);
            this.sevenChart.data.xAxis.push(item.xdate);
          })


        })
              
      },
    // 加油订单表单 --- 新接口
    getTableInfoData() {
      let presentEnterprise = this.$store.state.user.presentEnterprise
      if(!presentEnterprise) {
        presentEnterprise = {enterpriseId :null}
      }
      getTableInfo(presentEnterprise.enterpriseId).then(res => {
        this.tableData = res.data
        this.tableData.forEach(item => {
          if(item.customerPhone) {

            item.customerPhone = item.customerPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
          }
        })
      })
    },
    // 实时时间更新
     updateClock() {
      const now = new Date();
      const formatter = new Intl.DateTimeFormat('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
      const formattedDate = formatter.format(now);
      this.time = formattedDate;
    }
  },

}
</script>

<style scoped lang="scss">
// // 定义屏幕自适应的 mixin
// @mixin selfAdaption {
//   $designWidth: 1920px; // 设计稿的宽度，根据实际项目调整
//   $designHeight: 1080px; // 设计稿的高度，根据实际项目调整
//   $scale: min(100vw / #{$designWidth}, 100vh / #{$designHeight});
//   $translateX: -50%; // 水平居中偏移量，根据实际需求调整

//   #screen {
//     transform: scale($scale) translateX($translateX);
//   }

//   // 监听窗口大小变化
//   @at-root {
//     @content;
//   }
// }
.app-container {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  height: 100%;
  position: relative;
  background: url(~@/assets/image/底@2x.png) 100% no-repeat;
  background-size: 100% 100%; 
  // @include selfAdaption();
  .title {
    height:7.3vh;
    background: url(~@/assets/image/组10@2x.png) 100% no-repeat;
    background-size: 100% 100%;
    width: 100%;
    display: flex;
    justify-content: end;
    .time {
      background-image: linear-gradient(180deg, rgb(123, 252, 254) 0, rgb(123, 252, 254) 0, rgb(74, 176, 251) 100%, rgb(74, 176, 251) 100%);
      width: 12.5vw;
      height: 7.3vh;
      overflow-wrap: break-word;
      color: rgb(255, 255, 255);
      font-size: 2vh;
      padding-left: 0.3vh;
      font-family: PingFang-SC-Medium;
      font-weight: bold;
      text-align: left;
      white-space: nowrap;
      line-height: 7.3vh;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;  
    }
  }
  .main {
    margin-bottom: 1px;
    width: 100%;
    padding: 2vh 1vh 0 1vh;
    box-sizing: border-box;
    
    .totalCounts {
      box-sizing: border-box;
      width: 100%;
      height: 14.8vh;
      display: flex;
      justify-content: space-between;
      justify-content: space-between;
      .danwei {
        width: 0.8vw;
        height: 1vh;
        font-size: 3vh;
        font-family: YouSheBiaoTiHei;
        font-weight: blod;
        color: #FCE73A;
        overflow-wrap: break-word;
        text-align: left;
        white-space: nowrap;
        line-height: 1vh;
        margin: 5.5vh 0 0 0.45vh;
      }
      .point {
        width: 0.8vw;
        text-align: end;
        height: 1.5vh;
        font-size: 3vh;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FCE73A;
        line-height: 11.5vh;
      }
      .text1 {
        // width: 106px;
        height: 2vh;
        margin: 3vh 0 1vh 1vh;          
      }
      .title_1 {
        width: 4.5vw;
        font-size: 2vh;
        font-weight: 500;
        color: #FFFFFF;
        overflow-wrap: break-word;
        font-family: PingFang-SC-Medium;
        text-align: left;
        white-space: nowrap;
        line-height: 4vh;
      }
      .num1 {
        .num_1 { 
          height: 5.5vh;
          background: url(~@/assets/image/1@2x.png) 100% no-repeat;
          background-size: 100% 100%;
          width: 4.5vh;
          text-shadow: 0px 0.1vh 0.1vh rgba(16, 51, 85, 0.69);
          overflow-wrap: break-word;
          color: rgb(252, 231, 58);
          font-size: 5vh;
          font-family: YouSheBiaoTiHei;
          font-weight: 500;
          text-align: center;
          white-space: nowrap;
          line-height: 5.5vh;
          margin: 2vh 0 0 1.6vh;
        }
      }

      .userNum {
        height: 100%;
        background: url(~@/assets/image/框拷贝3@2x.png) 100% no-repeat;
        background-size: 100% 100%;
        width: 32%;
        padding-left: 0.34.5vh;

      }
      .refuelingAmount {
        height: 100%;
        background: url(~@/assets/image/框拷贝4@2x.png) 100% no-repeat;
        background-size: 100% 100%;
        margin-left: 20px;
        width: 32%;
        box-sizing: border-box;
        padding: 0 5px;
      }
      .rechargeAmount {
        height: 100%;
        background: url(~@/assets/image/框拷贝5@2x.png) 100% no-repeat;
        background-size: 100% 100%;
        margin-left: 20px;
        width: 32%;
        box-sizing: border-box;
        padding: 0 0.3vh;
        .text2 {
        height: 2vh;
        margin: 3vh 11vh 1vh 0;          
        justify-content: end;
        
      }
      }
      // .consumptionAmount {
      //   height: 100%;
      //   background: url(~@/assets/image/框拷贝6@2x.png) 100% no-repeat;
      //   background-size: 100% 100%;
      //   margin-left: 20px;
      //   width: 25%;
      //   .text2 {
      //   height: 2vh;
      //   margin: 1.5vh 5.5vh 0 0;          
      //   justify-content: end;
      //   text-align: right;
      //   box-sizing: border-box;
      //   padding: 0 0.2vh;   
      // }
      // }
    }
    .allCharts {
      width: 100%;
      margin-top: 2vh ;
      .left {
        width: 47%;
        
        .fifteenChart {
          height: 34.5vh;
          background: url(~@/assets/image/框拷贝1@2x.png) 100% no-repeat;
          background-size: 100% 100%;
        }
        .sevenChart {
          height: 34.5vh;
          background: url(~@/assets/image/框拷贝2@2x.png) 100% no-repeat;
          background-size: 100% 100%;
          padding: 0.5vh;
        }
      }
      .right {
        width: 52%;
        // margin-left: 0.5vh;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-around;
        .commchart {
          box-sizing: border-box;
          // margin-bottom: 9px; 
          margin-right: 4px;
          width: 48%;
          margin-bottom: 1vh;

        }
        .refuelingChart {         
          height: 34.5vh;
          background: url(~@/assets/image/框2@2x.png) 100% no-repeat;
          background-size: 100% 100%;
          padding: 4vh 0.2vh 0 0.2vh;
          margin-top: 0.5vh;
          margin-bottom: 0;
          box-sizing: border-box;

          .table {
            height: 100%;
            font-size: 1vh;
            text-align: center;
            th,td {
              padding: 0;
              border: 1px solid rgba(255,255,255,0.05);
              text-align: center;
            }
            thead {
              text-align: center;
              height: 4vh;
              font-size: 2vh;
              font-family: PingFang SC;
              font-weight: 500;
              color: rgba(255, 255, 255, 0.5);
              line-height: 4vh;   
              background: rgba(255,255,255,0.12);
            }
            tbody {
              height: 3vh;
              font-size: 1.6vh;
              font-family: PingFang SC;
              font-weight: 400;
              color: #FFFFFF;
              line-height: 5vh;
            }
          }
        }
        .otherChart {
          height: 34.5vh;
          margin-top: 0.5vh;
          margin-bottom: 0;
          background: url(~@/assets/image/框@2x.png) 100% no-repeat;
          background-size: 100% 100%;
          padding: 0.2vh 0.2vh 0 0.2vh;
          box-sizing: border-box;
          .commbox {
            width: 100%;
            height: 45%;
            margin: 1vh 0 0.8vh 0;
            justify-content: space-around;
            .otherleft {
              width: 50%;
            }
            .otherright {
              width: 50%;
              margin-left: -1vh;
            }
          }
          .commImg {
            width: 6vh;
            height: 6vh;
            margin: 6vh 1vh 0 1vh;
          }
          .text_2 {
            width: 2.2vh;
            height: 4.8vh;
            overflow-wrap: break-word;
            color: rgb(255, 255, 255);
            font-size: 1vh;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 0.8vh;
          }
          .num_2 {
            width: 1.2vh;
            height: 0.2vh;
            overflow-wrap: break-word;
            color: rgb(123, 252, 254);
            font-size: 2vh;
            font-family: YouSheBiaoTiHei;
            font-weight: bold;
            text-align: left;
            white-space: nowrap;
            line-height: 14vh;
          }
        }
        .statisticsChart {
          height: 34.5vh;
          background: url(~@/assets/image/框拷贝8@2x.png) 100% no-repeat;
          background-size: 100% 100%;
        }
        .rankingChart {
          height: 34.5vh;
          background: url(~@/assets/image/框拷贝7@2x.png) 100% no-repeat;
          background-size: 100% 100%;
          padding-right: 0.5vh;
        }
      }
    }
  }
    
  }
  
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.justify-start {
  display: flex;
  justify-content: flex-start;
}
.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}
.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}
.justify-around {
  display: flex;
  justify-content: space-around;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}

.right-menu-item {
  display: inline-block;
  padding: 0 8px;
  height: 100%;
  font-size: 18px;
  color: #fff ;
  vertical-align: text-bottom;

  &.hover-effect {
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }
}
</style>